<template>
  <div class="apiIndexMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--安全日志-->
    <div class="pageBody" id="pageBody">
    <!-- 左侧部分 -->
      <componentsPageMenu :lang="lang"></componentsPageMenu>
      <!-- 右侧部分 -->
      <div class="pageMain">

        <h3 class="mainTitle">{{lang['api Idmc API']}}</h3>
        <div class="apiNoths">
          <p>{{lang['api describe']}}
          </p>
          <p class="red">
            <font class="red">{{lang['api Notification center open']}}</font>
          </p>
          <button class="apiBtn" @click="newApiBtn">{{lang['api New api']}}</button>
        </div>
        <table class="apiList">
          <thead>
            <tr>
              <th>{{lang['api Remark name']}}</th>
              <th>API Key</th>
              <th>{{lang['api authority']}}</th>
              <th>{{lang['api Creation time']}}</th>
              <th>{{lang['api operate']}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in apiGetApiKeyList">
              <td>{{item.Content}}</td>
              <td>{{item.ApiKey}}</td>
              <td>
                  {{item.AllowCoinOut ? lang['api withdraw'] : ''}}{{item.AllowCoinOut && item.AllowTrading ? ',' : ''}}{{item.AllowTrading ? lang['api transaction'] : ''}}
              </td>
              <td> <p>{{item.CreateTime}}</p></td>
              <td>
                <a @click="checkApiBtn(item)">{{lang['look over']}}</a>
                <a @click="resettingApiBtn(item)">{{lang['api resetting']}}</a>
                <a @click="delApiBtn(item)">{{lang['api delete']}}</a>
              </td>
          </tr>

            <tr v-if="!apiGetApiKeyList.length">
              <td>--</td>
              <td>--</td>
              <td>--</td>
              <td>--</td>
              <td>--</td>
          </tr>
          </tbody>
        </table>
        <div class="apiNoths">
          <router-link to="/api/list" v-html="lang['api For details, please see']"></router-link>
        </div>
      </div>
    </div>

      <!-- 新建API-->
      <SwModal :isShow.sync="showNewApiModal" modalClass="userModalBackg userModalBorder resetApiModal" :isCloseOnClickBg="true" :onClosed="onClosed" :isShowCloseBtn= "true" :title="lang['api New api']" :isShowBg="true" :okText="lang.determineBth" :ok="newApi_okTexBtn" >
          <section class="newApi" >
            <ul>
              <li>
                <div class="title">{{lang['api Remark name']}}</div>
                <div class="control-box">
                  <input type="text"   v-model="remarkName"  :placeholder="lang['api enter a memo name']">
                </div>
              </li>
              <li>
                <div class="title"></div>
                <div class="control-box">
                  {{lang['api authority']}}：
                  <span class="checked" :class="{active: allowCoinOut}" @click="allowCoinOut = !allowCoinOut"> {{lang['api withdraw']}}</span>
                  <span class="checked" :class="{active: allowTrading}" @click="allowTrading = !allowTrading"> {{lang['api transaction']}}</span>
                </div>
              </li>
              <li>
                <div class="title">
                  <span v-show="GetCustomerList.Phone">{{lang['smsAuthenticationCode']}}</span>
                  <span v-show="!GetCustomerList.Phone">{{lang['mailboxVerificationCode']}}</span>
                </div>
                <div class="control-box">
                  <input type="text" v-model="verifyCode" :placeholder="lang['api Input verification code']" maxlength="6">
                  <a class="countryAreaNo" :class="{colorActive: sendMsgDisabled}">
                    <span v-if="sendMsgDisabled">{{lang['register_ClickGett']}}({{time}})</span>
                    <span v-if="!sendMsgDisabled" @click="sendEmail(1)" :class="{active: isSendSMS}">{{lang['register_ClickGet']}}</span>
                  </a>
                </div>
              </li>
            </ul>
          </section>
      </SwModal>
      <!--新建API-->

      <!-- 查看API-->
      <SwModal :isShow.sync="showLookApiModal"  modalClass="userModalBackg userModalBorder resetApiModal" :isCloseOnClickBg="true" :onClosed="onClosed" :isShowCloseBtn= "true" :title="'API' + lang['look over']"  :isShowBg="true"  :okText="lang['determineBth']" :ok="lookApi_okTexBtn" >
        <section class="newApi" >
          <ul>
            <li>
              <div class="title">
                <span v-show="GetCustomerList.Phone">{{lang['smsAuthenticationCode']}}</span>
                <span v-show="!GetCustomerList.Phone">{{lang['mailboxVerificationCode']}}</span>
              </div>
              <div class="control-box">
                <input type="text"  v-model="verifyCode" maxlength="6" :placeholder="lang['api Input verification code']">
                <a class="countryAreaNo" :class="{colorActive: sendMsgDisabled}">
                  <span v-if="sendMsgDisabled">{{lang['register_ClickGett']}}({{time}})</span>
                  <span v-if="!sendMsgDisabled" @click="sendEmail(2)"  :class="{active: isSendSMS}">{{lang['register_ClickGet']}}</span>
                </a>
              </div>
            </li>
          </ul>
        </section>
      </SwModal>

      <SwModal :isShow.sync="showLookApiModal2" modalClass="userModalBackg userModalBorder resetApiModal successApiModal" :isCloseOnClickBg="false" :onClosed="onClosed" :isShowCloseBtn= "true" :title="lang['look over']"  :isShowBg="true"  :okText="lang['determineBth']" :ok="lookApi_okTexBtn2" >
        <section class="lookApi" >
           <div class="item">
              <div class="title">
                <span>API Key:</span>
              </div>
              <div class="content">
                {{currentlookList.ApiKey}}
              </div>
            </div>
           <div class="item">
              <div class="title"><span>{{lang['api Remark name']}}:</span></div>
              <div class="content">
               {{currentlookList.Content}}
              </div>
            </div>
           <div class="item">
              <div class="title"><span>{{lang['api authority']}}:</span></div>
              <div class="content">
                <span>{{currentlookList.AllowCoinOut ? lang['api withdraw'] : ''}}</span>
                <span class="checked" v-show="currentlookList.AllowCoinOut && currentlookList.AllowTrading">,</span>
                <span>{{currentlookList.AllowTrading ? lang['api transaction'] : ''}}</span>
              </div>
            </div>

           <div class="item">
              <div class="title">
                <span>Secret Key:</span>
              </div>
              <div class="content">
                <p style="line-height:20px;">
                {{currentlookList.SecretKey}}
                </p>
              </div>
            </div>

            <div class="item img">
              <div class="title">
                <span>{{lang['two dimension code']}}:</span>
              </div>
              <div class="content">
                <img :src="currentlookList.QRLogo">
              </div>
            </div>
        </section>

      </SwModal>
      <!--查看API-->

      <!-- 重置api-->
      <SwModal :isShow.sync="showResetApiModal"  modalClass="userModalBackg userModalBorder resetApiModal" :isCloseOnClickBg="true" :onClosed="onClosed" :isShowCloseBtn= "true" :title="'API' + lang['api resetting']"  :isShowBg="true"  :okText="lang['determineBth']" :ok="resetApi_okTexBtn" >
        <section class="newApi" >
          <ul>
            <li>
              <div class="title">{{lang['api Remark name']}}</div>
              <div class="control-box">
                <input type="text" v-model="remarkName">
              </div>
            </li>
            <li>
              <div class="title"></div>
              <div class="control-box">
                {{lang['api authority']}}：
                <span class="checked" :class="{active: allowCoinOut}" @click="allowCoinOut = !allowCoinOut"> {{lang['api withdraw']}}</span>
                <span class="checked" :class="{active: allowTrading}" @click="allowTrading = !allowTrading"> {{lang['api transaction']}}</span>
              </div>
            </li>
            <li>
              <div class="title">
                <span v-show="GetCustomerList.Phone">{{lang['smsAuthenticationCode']}}</span>
                <span v-show="!GetCustomerList.Phone">{{lang['mailboxVerificationCode']}}</span>
              </div>
              <div class="control-box">
                <input type="text"  v-model="verifyCode" maxlength="6" :placeholder="lang['api Input verification code']">
                <a class="countryAreaNo" :class="{colorActive: sendMsgDisabled}">
                  <span v-if="sendMsgDisabled">{{lang['register_ClickGett']}}({{time}})</span>
                  <span v-if="!sendMsgDisabled" @click="sendEmail(3)"  :class="{active: isSendSMS}">{{lang['register_ClickGet']}}</span>
                </a>
              </div>
            </li>
          </ul>
        </section>
      </SwModal>
      <!--重置api-->

      <!-- 删除API-->
      <SwModal :isShow.sync="showDelApiModal" modalClass="userModalBackg userModalBorder resetApiModal" :isCloseOnClickBg="true" :onClosed="onClosed" :isShowCloseBtn= "true" :title="'API' + lang['api delete']"  :isShowBg="true"  :okText="lang['determineBth']" :ok="deletApi_okTexBtn" >
        <section class="newApi" >
          <p class="content">{{lang['api Delete the memo name'].replace('{userName}', currentList.Content || '')}}</p>
          <ul>
            <li>
              <div class="title">
                <span v-show="GetCustomerList.Phone">{{lang['smsAuthenticationCode']}}</span>
                <span v-show="!GetCustomerList.Phone">{{lang['mailboxVerificationCode']}}</span>
              </div>
              <div class="control-box">
                <input type="text"  v-model="verifyCode" maxlength="6" :placeholder="lang['api Input verification code']">
                <a class="countryAreaNo" :class="{colorActive: sendMsgDisabled}">
                  <span v-if="sendMsgDisabled">{{lang['register_ClickGett']}}({{time}})</span>
                  <span v-if="!sendMsgDisabled" @click="sendEmail(4)" :class="{active: isSendSMS}">{{lang['register_ClickGet']}}</span>
                </a>
              </div>
            </li>
          </ul>
        </section>
      </SwModal>
      <!-- 删除API-->

      <!-- 成功弹窗-->
      <SwModal :isShow.sync="isAddApiSuccess" modalClass="userModalBackg userModalBorder resetApiModal successApiModal" :isCloseOnClickBg="true" :onClosed="onClosed" :isShowCloseBtn= "true" :title="lang['point out']"  :isShowBg="true"  :okText="lang['determineBth']" :ok="okSuccess" >
        <section class="successMain" >
          {{apiSuccessText}}
        </section>
      </SwModal>
      <!-- 删除API-->

      <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
    </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import componentsPageMenu from './../safety/components/pageMenu.vue'
export default {
  mixins: [commonMixins],
  data () {
    return {
      time: 60,
      sendMsgDisabled: false,
      isSendSMS: false,
      showNewApiModal: false,  // 新建api弹窗
      apiGetApiKeyList: [], // 获取API列表
      GetCustomerList: {}, // 获取个人信息
      phone_emali: '', // 手机或者邮箱
      remarkName: '', // 备注名
      allowCoinOut: false, // 交易类型 提币
      allowTrading: false, // 交易类型 交易
      verifyCode: '', // 验证码
      showLookApiModal: false, // 显示查看弹窗 1
      showLookApiModal2: false, // 显示查看弹窗 2
      showResetApiModal: false,  // 显示重置弹窗
      showDelApiModal: false,  // 显示删除弹窗
      currentList: {},  // 显示当前列表
      currentlookList: {},  // 显示查看列表
      interval: null,
      isAddApiSuccess: false,
      apiSuccessText: ''
    }
  },
  components: {
    SwModal,
    componentsPageMenu
  },
  methods: {
    okSuccess () {
      this.isAddApiSuccess = false
    },
    inputValidation () {
      if (!this.remarkName) {
        ModalApi.message(this.lang['api enter a memo name'])
        return false
      }
      if (!this.allowCoinOut && !this.allowTrading) {
        ModalApi.message(this.lang['api Optional permission type'])
        return false
      }
      if (!this.verifyCode) {
        ModalApi.message(this.lang['api Input verification code'])
        return false
      }
      return true
    },
    // 获取API列表
    getApiKeyList () {
      this.$http.post('MyIDCMApi/GetApiKeyList', {
      })
      .then((res) => {
        this.apiGetApiKeyList = res.Data || []
      })
    },
    // 新建api
    newApiBtn () {
      this.showNewApiModal = !this.showNewApiModal
    },
    newApi_okTexBtn () {
      if (!this.inputValidation()) {
        return
      }
      this.$http.post('MyIDCMApi/AddApiKey', {
        content: this.remarkName,
        allowCoinOut: this.allowCoinOut,
        allowTrading: this.allowTrading,
        verifyCode: this.verifyCode
      }, {
        ignorableCodes: '43013'
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.showNewApiModal = false
          this.apiSuccessText = this.lang['api New API successful']
          this.isAddApiSuccess = true
          this.getApiKeyList()
        } else if (res.StatusCode === '43013' && res.Extra < 5) {
          ModalApi.message( this.lang['api Verification code error'].replace('{number}', 5 - res.Extra))
        }
      })
    },
    // 发送验证码
    sendEmail (type) {
      if (this.isSendSMS) {
        return
      }
      this.isSendSMS = true
      this.$http.post('MyIDCMApi/SendVerifyCode', {
        verificationCodeType: type
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          // 倒计时
          let me = this
          me.sendMsgDisabled = true
          me.interval = window.setInterval(() => {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(me.interval)
            }
          }, 1000)
          // 倒计时
        }
        this.isSendSMS = false
      })
    },

    // 查看 api
    checkApiBtn (item) {
      this.showLookApiModal = !this.showLookApiModal
      this.currentList = item
    },
    lookApi_okTexBtn () {
      this.$http.post('MyIDCMApi/GetApiKey', {
        id: this.currentList.ID,
        verifyCode: this.verifyCode
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.showLookApiModal = !this.showLookApiModal
          this.showLookApiModal2 = !this.showLookApiModal2
          this.currentlookList = res.Data || {}
        } else if (res.StatusCode === '43013' && res.Extra < 5) {
          ModalApi.message( this.lang['api Verification code error'].replace('{number}', 5 - res.Extra))
        }
      })
    },
    lookApi_okTexBtn2 () {
      this.showLookApiModal2 = !this.showLookApiModal2
    },
    // 重置 api
    resettingApiBtn (item) {
      this.showResetApiModal = !this.showResetApiModal
      this.currentList = item
      this.remarkName = item.Content
      this.allowCoinOut = item.AllowCoinOut // 交易类型 提币
      this.allowTrading = item.AllowTrading // 交易类型 交易
    },
    resetApi_okTexBtn () {
      if (!this.inputValidation()) {
        return
      }
      this.$http.post('MyIDCMApi/ResetApiKey', {
        id: this.currentList.ID,
        content: this.remarkName,
        allowCoinOut: this.allowCoinOut,
        allowTrading: this.allowTrading,
        verifyCode: this.verifyCode
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.showResetApiModal = !this.showResetApiModal
          this.apiSuccessText = this.lang['api Reset API successful']
          this.isAddApiSuccess = true
          this.getApiKeyList()
        } else if (res.StatusCode === '43013' && res.Extra < 5) {
          ModalApi.message( this.lang['api Verification code error'].replace('{number}', 5 - res.Extra))
        }
      })
    },
    // 删除 api
    delApiBtn (item) {
      this.showDelApiModal = !this.showDelApiModal
      this.currentList = item
    },
    deletApi_okTexBtn () {
      this.$http.post('MyIDCMApi/DelApiKey', {
        id: this.currentList.ID,
        verifyCode: this.verifyCode
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.showDelApiModal = !this.showDelApiModal
          this.apiSuccessText = this.lang['api Delete API successfully']
          this.isAddApiSuccess = true
          this.getApiKeyList()
        } else if (res.StatusCode === '43013' && res.Extra < 5) {
          ModalApi.message( this.lang['api Verification code error'].replace('{number}', 5 - res.Extra))
        }
      })
    },
    onClosed () {
      this.sendMsgDisabled = false
      this.time = 60
      window.clearInterval(this.interval) //  发送验证码清空
      this.remarkName = ''
      this.verifyCode = ''
      this.allowCoinOut = false
      this.allowTrading = false
    }
  },
  mounted () {
    this.getApiKeyList()
    /*
    获取首页信息
    */
    this.$http.post('Security/GetCustomer').then((res) => {
      this.GetCustomerList = res || {}
      if (res.Phone) {
        this.phone_emali = this.GetCustomerList.Phone
      } else {
        this.phone_emali = this.GetCustomerList.Email
      }
    })
  }
}
</script>

<style>
  .apiIndexMain {
    background: #14141c;
  }
  .apiIndexMain .pageMain {font-family: 'MontserratLight';}
  .apiIndexMain .blue{
    color: #3782FF;
  }

  .apiIndexMain .red{
    color: #FD3117;
  }

  .apiIndexMain .mainTitle {
    color: #fff;
  }
  .apiIndexMain .apiNoths {
    position: relative;
    margin-top: 10px;
    line-height: 26px;
    color: #ccc;
    overflow: hidden;
  }
  .apiIndexMain .apiNoths a{
    color: #fff;
  }
  .apiIndexMain .apiNoths p{
    float: left;
    width: 80%;
  }

  .apiIndexMain .apiNoths .apiBtn{
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 3px;
    background-color: #3782ff;
    color: #fff;
    font-size: 14px;
  }

  .apiIndexMain .apiList{
    width:100%;
    margin: 20px 0;
  }

  .apiList tr td,
  .apiList tr th{
    width: 20%;
    padding-left: 20px;
    line-height: 40px;
    font-size: 14px;
    color: #ddd;
    text-align: left;
  }
  .apiList tr td p {
    display: inline-block;
    line-height: 20px;
  }
  .apiList tr td:last-child,
  .apiList tr th:last-child{
    padding-left: 0;
    padding-right: 20px;
    text-align: right;
  }

  .apiList th{
    background: #1a1e2a;
    font-size: 14px;
  }
  .apiList td{
    background: #171a23;
    font-size: 14px;
  }

  .apiList td a{
    display: inline-block;
    margin: 0 3px;
    color: #3782FF;
  }

  .newApi{
    width: 420px;
    padding:0 90px 20px;
  }

  .newApi .content {
    line-height: 20px;
    padding: 0 0 25px;
    text-align: center;
    color: #FFF;
  }

  .newApi li{
    color: #fff;
  }

  .newApi .title{
    padding: 10px 0 5px;
  }

  .newApi .title span {
    line-height: 18px;
    color: #fff;
  }

  .newApi .control-box{
    position: relative;
    margin: 0;
    border-bottom: none;
    color: #fff;
  }

  .newApi .control-box .checked{
    display: inline-block;
    margin-left: 30px;
    padding-left: 20px;
    background: url(./images/checkState1.png) no-repeat left center;
    color: #fff;
    cursor: pointer;
  }

  .newApi .control-box .checked.active{
    background: url(./images/checkState2.png) no-repeat left center;
  }

  .newApi .control-box input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #132032;
    border: 1px solid #4E5A84;
    border-radius: 2px;
    padding: 0 10px;
    color: #fff;
    box-sizing: border-box;
  }

  .newApi .control-box .countryAreaNo {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
  }

  .newApi .control-box .countryAreaNo span {
    display: block;
    font-size: 12px;
  }

  .newApi .control-box .countryAreaNo span.colorActive {
    color: #ccc
  }

  .newApi .control-box .countryAreaNo:after{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    display: block;
    width: 1px;
    height: 20px;
    border-right: solid 1px #B1BBC2;
   }


  .lookApi{
    width: 420px;
    padding:0 90px 20px;
  }

  .lookApi .item{
    overflow: hidden;
    min-height: 36px;
    padding-bottom: 10px;
  }

  .lookApi .title{
    float: left;
    width: 120px;
    text-align: right;
  }

  .lookApi .title span{
    line-height: 18px;
    color: #fff;
  }

  .lookApi .content{
    float: left;
    border-bottom: none;
    margin-bottom: 0;
    padding-left:  40px;
    width: 260px;
    color: #fff;
    word-break:break-all;
   }

   .lookApi .content img {
    width: 100px;
    height: 100px;
   }

  .lookApi .content .checked {
    margin-right: 5px;
  }

  .lookApi .item.img .content{
    height:100px;
  }

  .resetApiModal.modal .head { padding: 40px 0 20px; border-bottom: none; text-align: center; font-size: 16px;}
  .resetApiModal.modal .foot { padding: 20px 20px 40px; }
  .successApiModal.modal .head {
    padding-top: 10px;
    font-size: 14px;
  }
  .successApiModal.modal .foot {
    padding: 0 20px 30px;
  }

  .successApiModal .successMain {
    width: 220px;
    padding: 0 82px 30px;
    text-align: center;
    color:#fff
  }

@media screen and (max-width:1200px){
  .apiIndexMain .apiNoths p{
    float: none;
    width: 100%;
  }
  .apiIndexMain .apiNoths .apiBtn {
    float: right;
    position: static;
  }

  .apiList tr td,
  .apiList tr th{
    width: 19%;
  }
  .apiList tr td:last-child,
  .apiList tr th:last-child{
    width: 24%;
  }
}
</style>

